1
00:00:03,000 --> 00:00:06,478
İlk Next.js projemizi kurduk,

2
00:00:06,478 --> 00:00:09,186
ve yerel kalkınmayı başlattık

3
00:00:09,186 --> 00:00:11,818
"sonraki dev" komutuyla sunucu.

4
00:00:11,893 --> 00:00:15,418
Şimdi web sitemizi tarayıcıda açmayı denersek,

5
00:00:15,418 --> 00:00:18,698
şu anda sadece "bulunamadı" mesajı alıyoruz,

6
00:00:18,698 --> 00:00:22,749
çünkü uygulamamızda henüz sayfa yok.

7
00:00:22,749 --> 00:00:26,059
Şimdilik sunucuyu durduralım.

8
00:00:26,059 --> 00:00:28,400
ve bir sayfayı nasıl tanımlayacağınızı görün.

9
00:00:28,480 --> 00:00:31,807
Basitçe bir ana sayfa oluşturarak bir ana sayfa ekleyebiliriz.

10
00:00:31,807 --> 00:00:34,647
"app" klasörünün içinde yeni bir dosya,

11
00:00:34,728 --> 00:00:37,490
"page.jsx" olarak adlandırılır.

12
00:00:37,490 --> 00:00:39,968
Tıpkı "düzen" dosyası gibi,

13
00:00:39,968 --> 00:00:43,784
"page" dosyası bir React bileşenini dışa aktarmalıdır,

14
00:00:43,784 --> 00:00:45,876
buna "Ana Sayfa" adını verelim.

15
00:00:46,184 --> 00:00:49,562
Ve burada bazı JSX öğelerini döndürebiliriz.

16
00:00:49,562 --> 00:00:52,952
Basit bir "h1" başlığıyla başlayalım,

17
00:00:52,952 --> 00:00:55,647
"İlk Next.js sayfam" diyor.

18
00:00:55,734 --> 00:00:59,176
Yani ana sayfamızın içeriği bu olacak.

19
00:00:59,176 --> 00:01:01,811
Hadi bu dosyayı kaydedelim ve gidip başlayalım

20
00:01:01,811 --> 00:01:03,682
terminaldeki sunucu.

21
00:01:03,752 --> 00:01:06,281
Şimdi "sonraki" sözcüğünü kullanacağımız için

22
00:01:06,281 --> 00:01:08,160
dev" komutunu her zaman

23
00:01:08,232 --> 00:01:10,631
bir "komut dosyası" eklersek daha iyi olur

24
00:01:10,631 --> 00:01:12,505
package.json dosyamıza.

25
00:01:12,580 --> 00:01:15,155
Bir "dev" betiği tanımlayabiliriz;

26
00:01:15,155 --> 00:01:17,275
"sonraki dev" komutunu çalıştırır.

27
00:01:17,350 --> 00:01:19,041
Bu şekilde terminalde

28
00:01:19,110 --> 00:01:22,219
onun yerine "npm run dev" yazabiliriz,

29
00:01:22,219 --> 00:01:25,185
ve bu "sonraki geliştiriciyi" çalıştıracak,

30
00:01:25,185 --> 00:01:28,151
sunucuyu 3000 numaralı bağlantı noktasından başlatıyoruz.

31
00:01:28,240 --> 00:01:31,857
Tüm scriptlerimizi package.json dosyasında listeleyerek

32
00:01:31,857 --> 00:01:34,527
hangi komutların olduğunu görmek de daha kolaydır

33
00:01:34,527 --> 00:01:36,565
projemizde mevcuttur.

34
00:01:36,635 --> 00:01:39,053
Neyse, tarayıcıya geri dönersek,

35
00:01:39,053 --> 00:01:40,360
ve sayfayı yeniden yükleyin,

36
00:01:40,426 --> 00:01:42,586
şimdi gösterildiğini görebilirsiniz

37
00:01:42,586 --> 00:01:44,747
kodumuzda yazdığımız başlık.

38
00:01:44,812 --> 00:01:48,684
Yani ana sayfamız doğru bir şekilde görüntüleniyor.

39
00:01:48,684 --> 00:01:51,508
Şimdi sayfalarımız üzerinde çalışırken

40
00:01:51,508 --> 00:01:54,332
her zaman Chrome Geliştirici Araçlarını kullanın,

41
00:01:54,406 --> 00:01:56,651
Bu menüden açabileceğiniz

42
00:01:56,651 --> 00:01:58,557
veya bir klavye kısayoluyla.

43
00:01:58,625 --> 00:02:01,488
Bu şekilde herhangi bir günlük mesajını görebiliriz

44
00:02:01,488 --> 00:02:03,317
Konsola yazdırılır.

45
00:02:03,397 --> 00:02:06,751
Çoğu video için tarayıcıyı da tutacağım

46
00:02:06,751 --> 00:02:09,583
sağ taraftaki daha küçük bir pencerede,

47
00:02:09,657 --> 00:02:12,036
ve Visual Studio Code penceresi

48
00:02:12,036 --> 00:02:13,909
ekranın geri kalanında,

49
00:02:13,981 --> 00:02:16,957
böylece her iki kodu da editörde görebilirsiniz,

50
00:02:16,957 --> 00:02:19,341
ve aynı zamanda sayfanın ne olduğu

51
00:02:19,341 --> 00:02:21,164
tarayıcıdaki gibi görünüyor.

52
00:02:21,234 --> 00:02:24,101
Geliştirici sunucusu otomatik olarak güncellenecektir

53
00:02:24,101 --> 00:02:26,753
kodumuzu her değiştirdiğimizde sayfa.

54
00:02:26,825 --> 00:02:29,402
Mesela bu başlığı değiştirelim,

55
00:02:29,565 --> 00:02:31,845
ve onu "Bağımsız Oyuncu" olarak ayarlayın;

56
00:02:31,845 --> 00:02:34,055
sitemizin adı olacaktır.

57
00:02:34,124 --> 00:02:37,000
Bu değişikliği kaydettiğimiz anda sayfa

58
00:02:37,000 --> 00:02:39,444
yeni metni güncelleyecek ve gösterecektir.

59
00:02:39,516 --> 00:02:41,589
Çoğu zaman ayrılabiliriz

60
00:02:41,589 --> 00:02:43,448
terminal paneli kapatıldı.

61
00:02:43,519 --> 00:02:46,651
Geliştirici sunucusu yine de çalışmaya devam edecek.

62
00:02:46,651 --> 00:02:49,187
Bu sayfaya bir paragraf ekleyebiliriz,

63
00:02:49,291 --> 00:02:51,560
"Yalnızca

64
00:02:51,560 --> 00:02:53,343
en iyi bağımsız oyunlar"

65
00:02:53,424 --> 00:02:54,878
"sizin için incelendi".

66
00:02:56,064 --> 00:03:00,275
Şimdi, JSX'te tek bir kök öğeye sahip olmalıyız,

67
00:03:00,275 --> 00:03:03,700
bu yüzden her şeyi bir React parçasına saracağım,

68
00:03:03,700 --> 00:03:05,669
bu özel unsur

69
00:03:05,669 --> 00:03:07,356
boş bir etiket olarak yazılmıştır.

70
00:03:07,427 --> 00:03:09,873
Bu şekilde sayfa her ikisini de oluşturacaktır

71
00:03:09,873 --> 00:03:12,031
başlık ve paragraf.

72
00:03:12,103 --> 00:03:14,605
Yani bu sayfa oldukça işe yarıyor

73
00:03:14,605 --> 00:03:17,106
diğer React bileşenleri gibi.

74
00:03:17,187 --> 00:03:19,801
Next.js'yi özel kılan şey,

75
00:03:19,801 --> 00:03:22,236
ve Uygulama Yönlendiricisi, bu

76
00:03:22,326 --> 00:03:25,562
sayfada ne varsa eklenecek

77
00:03:25,562 --> 00:03:28,716
RootLayout tarafından tanımlanan belge.

78
00:03:28,797 --> 00:03:31,553
Şu anda bu düzen yalnızca görüntüleniyor

79
00:03:31,553 --> 00:03:33,863
"beden"in içindeki çocuklar.

80
00:03:33,937 --> 00:03:36,827
Ancak buraya başka unsurlar da ekleyebiliriz.

81
00:03:36,827 --> 00:03:39,505
Örneğin, çoğu uygulamada isteyeceğimiz

82
00:03:39,505 --> 00:03:42,182
tüm sayfalar için ortak bir "başlık".

83
00:03:42,256 --> 00:03:46,049
Şimdilik sadece yer tutucu metinler yazacağım.

84
00:03:46,049 --> 00:03:49,704
Daha sonra sayfa içeriği merkezi kısım olacaktır.

85
00:03:49,704 --> 00:03:53,108
Aslında onu bir "ana" öğenin içine sarabiliriz,

86
00:03:53,108 --> 00:03:55,630
bu iyi bir uygulamadır ve

87
00:03:55,630 --> 00:03:57,634
aynı zamanda stillendirme için de yararlı olabilir.

88
00:03:57,708 --> 00:04:00,626
Genellikle bir "altbilgi" de isteriz,

89
00:04:00,788 --> 00:04:03,052
başka bir içerik gösteriliyor.

90
00:04:03,052 --> 00:04:05,716
Güncellenen düzeni kaydedersek,

91
00:04:05,716 --> 00:04:07,983
artık sayfamızı görebilirsiniz

92
00:04:07,983 --> 00:04:10,017
bir üstbilgi ve bir altbilgiye sahiptir.

93
00:04:10,095 --> 00:04:13,197
Bu arada metni köşeli parantez içine aldım

94
00:04:13,197 --> 00:04:16,161
sadece yer tutucu olduklarını belirtmek için,

95
00:04:16,230 --> 00:04:19,728
özel bir sözdizimi ya da buna benzer bir şey değil.

96
00:04:19,728 --> 00:04:22,269
Mesele şu ki, kullandığımız unsurlar

97
00:04:22,269 --> 00:04:24,425
sayfa bileşeninde geri dönüş

98
00:04:24,502 --> 00:04:27,285
bunların içinde işlenir

99
00:04:27,285 --> 00:04:29,233
düzen bileşeni.

100
00:04:29,326 --> 00:04:31,599
Yani bu anlamda düşünebilirsiniz

101
00:04:31,599 --> 00:04:33,720
mizanpajın şablon olarak kullanılması,

102
00:04:33,796 --> 00:04:36,479
bu tüm sayfalar için geçerli olacaktır.